<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ZxBlog 后台管理员登录</title>
<link rel="stylesheet" href="../css/login.css">
<link rel="stylesheet" href="../css/login_background_color.css">
</head>
<body>

<svg id="svg_bg_color" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
    <defs>
        <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
            <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="#ff0" />
            <stop offset="100%" stop-color="#ff00" />
        </radialGradient>
        <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5">
            <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="#0ff" />
            <stop offset="100%" stop-color="#0ff0" />
        </radialGradient>
        <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5">
            <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" />
            <stop offset="0%" stop-color="#f0f" />
            <stop offset="100%" stop-color="#f0f0" />
        </radialGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)">
        <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
        <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite"/>
    </rect>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)">
        <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" />
        <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite"/>
    </rect>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)">
        <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" />
        <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" />
        <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite"/>
    </rect>
</svg>

<div class="main">
<div class="container a-container is-txl" id="a-container">
<form class="form" id="a-form" method="" action="">
<h2 class="form_title title">会员注册</h2>
<span class="form__span">或者使用Email进行注册</span>
<input class="form__input" type="text" placeholder="用户名">
<input class="form__input" type="text" placeholder="电子邮件">
<input class="form__input" type="password" placeholder="密码">
<button class="form__button button submit">注册</button>
</form>
</div>
<div class="container b-container is-txl is-z200" id="b-container">
<form class="form" id="b-form" method="" action="">
<h2 class="form_title title">会员登录</h2><span class="form__span">请登录</span>
<input class="form__input" type="text" placeholder="用户名">
<input class="form__input" type="password" placeholder="密码"><a class="form__link">忘记密码?</a>
<button class="form__button button submit">登录</button>
</form>
</div>
<div class="switch is-txr" id="switch-cnt">
<div class="switch__circle"></div>
<div class="switch__circle switch__circle--t"></div>
<div class="switch__container" id="switch-c1">
<h2 class="switch__title title">欢迎回来 !</h2>
<p class="switch__description description">如果您想和我们服务器保持联系，请输入个人信息并登录</p>
<button class="switch__button button switch-btn">注册</button>
</div>
<div class="switch__container is-hidden" id="switch-c2">
<h2 class="switch__title title">您好，新朋友 !</h2>
<p class="switch__description description">输入您的个人信息，注册到我们网站吧!</p>
<button class="switch__button button switch-btn">登录</button>
</div>
</div>
</div>
<script src="../js/UserLogin.js"></script>
</body>
</html>
